<template>
  <ContentWrap>
    <ElDialog
      v-model="dialogVisible"
      title="学习计划详情"
      width="600"
      max-height="100"
      fullscreen
      destroy-on-close
    >
      <template #default>
        <ElDescriptions :column="4">
          <template #title>
            <span>{{ currentRow.name }}</span>
          </template>
          <ElDescriptionsItem label="类型:">
            {{ currentRow.type == '0' ? '视频' : currentRow.type == '1' ? '音频' : '视频/音频' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="状态:">
            {{ currentRow.status == 0 ? '未启用' : '启用' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="广告占比率:">
            {{ currentRow.adPercentage }}
          </ElDescriptionsItem>
        </ElDescriptions>
        <ElTabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <ElTabPane label="种类" name="first">
            <template #default>
              <VideoTabTable :studyPlan="currentRow" />
            </template>
          </ElTabPane>
          <ElTabPane label="广告" name="second">
            <template #default>
              <AdTabTable :studyPlan="currentRow" />
            </template>
          </ElTabPane>
          <ElTabPane label="音频日程" name="three">
            <template #default>
              <ScheduleTabTable :studyPlan="currentRow" />
            </template>
          </ElTabPane>
          <ElTabPane label="正在学习" name="four">
            <template #default>
              <CurrentStudyTabTable :studyPlan="currentRow" />
            </template>
          </ElTabPane>
        </ElTabs>
      </template>
    </ElDialog>
  </ContentWrap>
</template>
<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'
import { Search } from '@/components/Search'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, defineProps, reactive, onMounted, nextTick, unref } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
const searchParams = ref({})
const setSearchParams = (params: any) => {
  params.name = params.name
  searchParams.value = params
}
const activeName = ref('first')
import {
  ElDialog,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElTabPane
} from 'element-plus'
import VideoTabTable from '@/views/StudyPlan/videoPlan/components/videoTabTable.vue'
import AdTabTable from '@/views/StudyPlan/videoPlan/components/adTabTable.vue'
import ScheduleTabTable from '@/views/StudyPlan/videoPlan/components/scheduleTabTable.vue'
import CurrentStudyTabTable from '@/views/StudyPlan/videoPlan/components/currentStudyTabTable.vue'
const { required } = useValidator()
const dialogVisible = ref(false)
const currentRow = ref({})

const isShowVideoPlanDetailModel = (row) => {
  currentRow.value = row
  dialogVisible.value = true
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
defineExpose({ isShowVideoPlanDetailModel })
</script>
<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
